<docs>
  ## 个人退休申请预约首页
</docs>
<template>
  <div class="fixedBox">
    <mheader class="index" @back_btn="goBack()" title="个人退休申请预约"></mheader>
    <!-- 申请须知 开始 -->
    <div class="list">
      <div class="title">
        <h3 class="title-h3">个人退休申请预约服务告知书</h3>
      </div>
      <div class="content">
        <ul>
          <li class="c-li">1、<span>退休申请预约服务范围为在本市流动人员人事档案管理服务机构（以下简称档案管理服务机构）个人存档，并达到国家法定退休年龄，在档案管理服务机构代办社会保险且缴纳社会保险满足规定年限的个人参保人员。</span></li>
          <li class="c-li">2、<span>退休申请条件：男年满60周岁，女干部满55周岁，女工人满50周岁；社保缴费年限（含视同缴费年限）累计满15年。</span></li>
          <li class="c-li">3、<span>请保证您填写的预约信息真实、有效。</span></li>
          <li class="c-li">4、<span>预约成功后需申请退休本人携带有关证件到档案管理服务机构现场办理，退休申请是否成功以现场办理结果为准。</span></li>
          <li class="c-li">5、<span>提交预约后3个工作日内反馈预约结果，预约通过后请选择办理时间，请您在约定时间前来办理。</span></li>
          <li class="c-li"><mt-switch :value.sync="value" @change="turn">已阅读并同意</mt-switch></li>
        </ul>
      </div>
    <!-- 通知 开始 -->
    <div class="notice" v-show="noticeVisible" @click="sqList">
      <i class="iconfont icon-notice icon-before"></i>
      <p class="content">{{noticeText}}</p>
      <i class="iconfont icon-arrow icon-after"></i>
    </div>
    <!-- 通知 结束 -->
    <div class="apply">
      <div class="info">
        <div class="info-cont1" >
          <p class="info-cont1-name">{{grxx.xm}}</p>
          <p class="info-cont1-phone">电话：{{grxx.lxdh}}</p>
        </div>
        <p class="info-cont2">身份证号：{{grxx.sfzhm}}</p>
      </div>
      <!-- <div class="apply-btn" @click="reverseBtn">同意 开始预约</div> -->
      <button
        type="button"
        class="left btn btn-primary apply-btn"
        @click="reverseBtn"
        :disabled="!value"
      >开始预约</button>
    </div>
    </div>
  </div>
</template>
<script>
import Mheader from '@/ldry/group/mheader/mheader';
import $ from '@/common/js/axios';
import { mapActions } from "vuex";

export default {
  components: { Mheader },
  name: 'txyytxyy',
  data() {
    return {
      value: false,
      grxx: {
        sfzhm: '',
        xm: '',
        lxdh: ''
      },
      // 最新申请提示
      noticeVisible: false,
      noticeText: ''
    };
  },
  methods: {
    ...mapActions(["getUsers"]),
    goBack(){
      this.$router.push({ name: 'index' })
    },
    turn(){
      this.value = !this.value;
    },
    // 申请记录页面跳转
    sqList(){
      this.$router.push({ name: 'txyylist' })
    },
    // 检查按钮是否可用
    reverseBtn() {
      this.$loading = false;
      $.get('/dafwgl/txsq/checkSq',{ params: { ywlx: '4'} }).then((res) => {
        const flag = parseInt(res.returnData.executeResult, 10);
        let _res = res.returnData;
        this.$loading = false;
        if (flag === 1) {
          this.$router.push({ name: 'txyyone' });
        }else{
          this.$alert({
            type: "warning",
            message: _res.message
          });
        }
      }).catch(() => {});
    }
  },
  created() {
    this.getUsers();
    this.$loading = true;
    $.get("/dafwgl/personal/jbxxCx",{params:{ywlx: 'zjtxsq'}})
    .then(res => {
      let _res = res.returnData;
      if (+_res.executeResult == 1) {
        if (_res.zjtxsq) {
          this.noticeText = _res.zjtxsq;
          this.noticeVisible = true;
        }
      } else {
        this.$alert({
          type: "warning",
          message: _res.message
        });
        return false;
      }
    })
    .finally(() => {
      this.$loading = false;
    });
  },
  watch:{
    '$store.state.person':function(){
      this.grxx = this.$store.state.person;
    }
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/variable.scss';

//竖屏  CSS
@media screen and (orientation: portrait) {
  .index {
    // height: 100vh;
    width: 100vw;
  }
}
// 申请须知
.list {
  border: $border;
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .content {
    padding: 36px 48px;
    background-color: #fff;
    .c-li {
      font-size: 0.44444rem;
      line-height: 1.6;
      padding: 15px 0;
      span{
        width: 92%;
        display: inline-table;
      }
    }
  }
}
</style>
